<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>create class</title>
    <link rel="stylesheet" type="text/css" href="css1.css" />
    <script>

        class Person {
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
            say(){
                console.log(`我叫${this.name},我今年${this.age}岁了`)
                return this.name+this.age
            }
        }  
        class Star extends Person{
            constructor(name,age,salary,sing1){
                super(name,age)
                this.salary = salary;
                this.sing1 = sing1;
            }
            sing(){
                console.log(`我叫${this.name},我今年${this.age}岁了,我的工资是${this.salary},我唱歌${this.sing1}`)
                return this.name+this.age+this.salary+this.sing1
            }
        }
        let call = () => {
            var name = document.getElementById('name1').value
            var age = document.getElementById('age1').value
            var salary = 10000
            var sing1 = "我是歌手，我唱得好听"
            let l1 = new Star(name,age,salary,sing1)
            document.getElementById('show').value = l1.sing()
        }
  
    </script>

    <body>
        <input type = "text" id = "name1" value = "刘德华">
        <input type = "text" id = "age1" value = "58">
        <input type="button" value="点击" onclick="call()">
        <input type="text"  id="show">
    </body>
</html>